<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title></title>

    <link type="text/css" rel="stylesheet" href="../../rickshaw/src/css/extensions.css" />
	<style type="text/css">@import "../../css/jquery.svg.css";</style>
	<link rel="stylesheet" href="../../css/jquery.powertip.css" type="text/css" />
	<link rel="stylesheet" href="../../css/visualization.css" type="text/css" />

	<script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="../../scripts/jquery.svg.min.js"></script>
	<script type="text/javascript" src="../../scripts/jquery.sparkline.min.js"></script>
	<script type="text/javascript" src="../../scripts/jquery.powertip-1.1.0.min.js"></script>
	<script type="text/javascript" src="../../scripts/header.js"></script>

    <script type="text/javascript" src="../../basicstats.txt"></script>
    <script type="text/javascript" src="../../info.txt"></script>
    <script type="text/javascript" src="../../levels/topology/topology.txt"></script>

</head>
<body>

<script type="text/javascript">
  writeHeader('topology');
</script>


<div id="content" style="height: 500px;">
</div>

<div id="tooltipTemplate" style="display: none">
  <div class="popup-content" style="width: 200px; height: 100px">
    <div class="popup-sparkline"></div>
    <div class="popup-info" style="height: 20px; font-size: 12px; line-height: 20px; color: darkgray"></div>
  </div>
</div>

<script type="text/javascript">
  function buildTooltipContent(id)
  {
    $('.popup-info').html(topology[id]['info']);
    $('.popup-sparkline').sparkline(topology[id]['sparkdata'], {type: 'line', 'width': '200px', 'height': '80px'});
  }

  $("#content").svg({loadURL:'topo.svg', onLoad: function() {
    for (item in topology)
    {
      $("#"+item).data('powertiptarget', 'tooltipTemplate');
      $("#"+item).powerTip({placement: 'e', smartPlacement: true, mouseOnToPopup: true});
      $("#"+item).on('powerTipOpen', function() { buildTooltipContent(this.id); });
    }
  }});
</script>


</body>
